<%@ page language="java" import="java.util.*,com.beans.*,com.dao.*" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
<%
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>
  <head>
    <base href="<%=basePath%>">  
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="css/edittable.css"  ></link>  
	<link rel="stylesheet" type="text/css" href="css/validate.css"  ></link>  
	<script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
	<script >
		$(function(){
			
			/* 验证商品名称 */
			$("#goodsName").blur(function(){
				var id = $(this)[0].id;
				var name=$(this).val();
				var reg=/^\S{2,20}$/g;
				if(reg.test(name)){
					$.ajax({
						url:"GoodsServlet.do",
						type:"post",
						data:{goodsName:$(this).val(),flag:"goodsFlag"},
						success:function(data){
							if(data!=""){
								$("#"  +id+"_msg").html(data).removeClass().addClass("validate_error");
								goodsName=false;
							}else{
								$("#"  +id+"_msg").html("√").removeClass().addClass("validate_ok");
								goodsName=true;
							}
						}
					});
				}else{
					$("#"+id +"_msg").html("格式错误").removeClass().addClass("validate_error");
					goodsName=false;
				}
			});
			
			/* 验证计量单位 */
			$("#unit").blur(function(){
				var id = $(this)[0].id;
				var name=$(this).val();
				var reg=/^\S{1,10}$/g;
				if(reg.test(name)){
					$("#"+id +"_msg").html("√").removeClass().addClass("validate_ok");
					unit = true;
				}else{
					$("#"+id +"_msg").html("格式错误").removeClass().addClass("validate_error");
					unit=false;
				}
			});
			/* 验证价格 */
			$("#price").blur(function(){
				var id = $(this)[0].id;
				var name=$(this).val();
				var reg=/^\d+|(\d+\.?\d+)$/g;
				if(reg.test(name)){
					$("#"+id +"_msg").html("√").removeClass().addClass("validate_ok");
					price = true;
				}else{
					$("#"+id +"_msg").html("格式错误").removeClass().addClass("validate_error");
					price = false;
				}
			});
			
			/* 验证生产厂商 */
			$("#producter").blur(function(){
				var id = $(this)[0].id;
				var name=$(this).val();
				var reg=/^\S{2,20}$/g;
				if(reg.test(name)){
					$("#"+id +"_msg").html("√").removeClass().addClass("validate_ok");
					producter = true;
				}else{
					$("#"+id +"_msg").html("格式错误").removeClass().addClass("validate_error");
					producter=false;
				}
			});
			$("input[type=reset]").click(function(){
				window.location.href="goods/goods_add.jsp";
			});
			/* 菜单联动 */
			$("#one").change(function(){
				$("#two").empty();
				var Pid=this.value;
				if(Pid=="-1"){
					$("#two").append("<option value='-1'>请选择二级分类</option>");
				}else{
					$.ajax({
						url:"GoodsServlet.do",
						type:"post",
						async:false,
						data:{flag:"lianDong",id:Pid},
						dataType:"json",
						success:function(goods){
							var smallId = '${goodsInfo.smallCateId}';
							$.each(goods,function(k,v){
								if(smallId==v.id){
									var str="<option value='" + v.id+"' selected='selected'>" + v.cateName + "</option>";
								}else{
									var str="<option value='" + v.id+"'>" + v.cateName + "</option>";
								}
								$("#two").append(str);
							});
							$("#two_msg").html("√").removeClass().addClass("validate_ok");
						}
					});
				}
			});
			
			$("#picture").hide();
			$("#pictureData").change(function(){
				pictureSrc = window.URL.createObjectURL(this.files[0]);
				$("#img").attr('src',pictureSrc).css("width","100px").css("height","150px");
				$("#picture").show();
				$("#picture").val(this.value);
			});
			$("#one").change();  //在数据回显时候用与菜单联动
		});
		var goodsName=false;//设置全局变量   提交验证时候用  初始值设置false  防止开始就提交
		var unit=false;
		var price = false;
		var producter =false;
		/* 提交验证 */
		function validateInput(){
			var result=true;
			if(goodsName==false){
				$("#goodsName").blur();
				result = false;
			}
			if(unit==false){
				$("#unit").blur();
				result = false;
			}
			if(price==false){
				$("#price").blur();
				result = false;
			}
			if(producter==false){
				$("#producter").blur();
				result = false;
			}
			var val = $("#pictureData").val();
			if(val==""){
				result =false;
				$("#pictureData_msg").html("请选择一个图片").removeClass().addClass("validate_error");;
			}
			
			var twoval = $("#two").val();
			if(twoval==-1){
				$("#two_msg").html("必须选择分类").removeClass().addClass("validate_error");
				result=false;
			}
			var session = '${admin_session}';
			if(session!=""){
				if(result==true){
					$("#result_msg").html("√").removeClass().addClass("validate_ok");
						return confirm('确认要提交吗');
				}else{
					$("#result_msg").html("请正确填写信息后提交").removeClass().addClass("validate_error");
					return false;
				}
			}else{
				window.location.href="login.jsp";
			}
		}
		var goodsId = "${goodsInfo.id}";
		if(goodsId!=""){
			$("#img").attr('src',"GoodsServlet.do?flag=showPicture&goodsId='"+goodsId+"'").css("width","100px").css("height","150px");
			alert($("img")[0].src);
		}
	</script>
	<style>
		select{
			width:100px;
		}
		
		/*模拟文件控件的提交按钮*/
		.filebtn{ 
			background-color:#FFF; 
			border:1px solid #CDCDCD;
			height:20px; 
			width:70px;
		} 
		/*把真的文件控件藏起来*/
		.file{ 
			position:absolute; 
			top:0; 
			right:40px; 
			filter:alpha(opacity:0);opacity: 0;
			width:280px;
			height:30px;
		} 
		
	</style>
   </head>
  
  <body>
  
  	<%
	  	GoodsDao goodsDao = new GoodsDao();
	  	List<CateInfo> cateInfo = goodsDao.getCateList(0);
	  	request.setAttribute("cateInfo", cateInfo);
 	 %>
  	 <div class ="div_title">
		 <div class="div_titlename"> <img src="images/san_jiao.gif" ><span>添加商品</span></div>
	 </div>
	 <form action="GoodsServlet.do?flag=goodsAdd" 
	 	   method="post" 
	 	   name="form1" 
	 	   enctype="multipart/form-data" 
	 	   onsubmit="return validateInput()">
		 <table class="edit_table" >
	 		<tr>
	 			 	<td class="td_info">商品名称:</td>	
	 			 	<td class="td_input_short"> 
	 			 		<input type="text" class="txtbox" id="goodsName" name="goodsName" value="${param.goodsName }" /> 
	 			 	</td>   
	 			 	<td>
	 			 		<label class="validate_info" id="goodsName_msg" >长度2~20位非空白字符</label>
	 			 	</td> 
	 		</tr>
	 		<tr>
	 				<td class="td_info">所属分类:</td>	
	 				<td class="td_input_short"> 
	 					<select name="bigCate" id="one">
			 				<option value="-1">请选择一级分类</option>
			 				<c:forEach var="cate" items="${cateInfo }">
			 						<option value="${ cate.id}" <c:if test="${param.bigCate==cate.id }">selected</c:if> >${cate.cateName }</option>
			 				</c:forEach>
			 			</select>
			 			<select name="smallCate" id="two">
			 				<option value="-1">请选择二级分类</option>
			 			</select>
	 			 	</td>   
	 			 	<td>
	 			 		<label class="validate_info" id="two_msg" >请指定商品所属分类</label>
	 			 	</td> 
	 		</tr>
	 		 		<tr>
	 				<td class="td_info">计量单位:</td>	
	 				<td class="td_input_short"> 
	 			 		<input type="text" class="txtbox" id="unit" name="unit" value='${param.unit }' /> 
	 			 	</td>   
	 			 	<td>
	 			 		<label class="validate_info" id="unit_msg" >长度1~10位非空白字符</label>
	 			 	</td> 	
	 		</tr>
	 		 		<tr>
	 				<td class="td_info">商品价格:</td>	
	 				<td class="td_input_short"> 
	 			 		<input type="text" class="txtbox" id="price" name="price" value='${param.price }'/> 
	 			 	</td>   
	 			 	<td>
	 			 		<label class="validate_info" id="price_msg" >不可以为空但是可以为小数</label>
	 			 	</td> 	
	 		</tr>
	 		 		<tr>
	 				<td class="td_info">生产厂商:</td>	
	 				<td class="td_input_short"> 
	 			 		<input type="text" class="txtbox" id=producter name="producter" value='${param.producter }'/> 
	 			 	</td>   
	 			 	<td>
	 			 		<label class="validate_info" id="producter_msg" >长度2~20位为空白字符</label>
	 			 	</td> 	
	 		</tr>
	 		 		<tr>
	 				<td class="td_info">商品图片:</td>	
	 				<td class="td_input_short"> 
	 			 		<input type="file" accept="image/png,image/gif,image/jpeg" id="pictureData" name="pictureData" class="file"/> 
	 			 		<input type="button" value="找图片" onclick="document.getElementById('pictureData').click()" class="filebtn">
	 			 		<input type="text" id="picture" class="validate_info" size="10px"/>
	 			 		<img class="validate_info"  alt="图片" id="img"/>
	 			 	</td>   
	 			 	<td>
	 			 		<label class="validate_info" id="pictureData_msg" ></label>
	 			 	</td> 	
	 		</tr>
	 		 		<tr>
	 				<td class="td_info">备注:</td>	
	 				<td>
	 					<textarea rows="4" cols="27" class="txtarea" name="des">${param.des }</textarea>
	 				</td> 
	 				<td></td>	
	 		</tr>
	 		<tr>
	 			<td class="td_info"> </td>	
	 			<td> 
	 			<input class="form_btn" type="submit" value="提交" /> 
	 			<input type="reset"  class="form_btn" value="重置" /> </td>	
	 			<td>
	 				<label id="result_msg" class="result_msg"></label>
	 			</td>	
	 		</tr>
		</table>
	</form>
	<script type="text/javascript">
		var msg='${msg}';
		if(msg!=""){
			alert(msg);
		}
		var goodsId = ${goodsInfo.id};
		if(goodsId!=""){
			var str = 'GoodsServlet.do?flag=showPicture&goodsId=' + ${goodsInfo.id };
			$("#img").attr("src",str).css("width","100px").css("heigh","150px");
		}
	</script>
  </body>
</html>